<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 500px;
            height: 500px;
            margin: 50px auto;
            box-shadow: 0 0 5px #999;
        }
        
        .tab {
            border-bottom: 1px solid #999;
        }
        
        .tab .t-item {
            float: left;
            width: 25%;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        
        .tab .t-item.active {
            background-color: #000;
            color: #fff;
        }
        
        .page {
            position: relative;
            height: 450px;
        }
        
        .page .p-item {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            line-height: 450px;
            text-align: center;
            font-size: 50px;
        }
        
        .page .p-item.active {
            display: block;
        }
        
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="tab clearfix">
            <div class="t-item active">选项1</div>
            <div class="t-item">选项2</div>
            <div class="t-item">选项3</div>
            <div class="t-item">选项4</div>
        </div>
        <div class="page">
            <dov class="p-item active">页面1</dov>
            <dov class="p-item">页面2</dov>
            <dov class="p-item">页面3</dov>
            <dov class="p-item">页面4</dov>
        </div>
    </div>
    <script>
        //    bind改变this指向后返回一个新的函数，不执行；
        //    call改变this指向并立即执行
        // bind是挂载到Function.prototype

        //call apply模拟bind
        var p = {
            age: 18
        }

        function Person(name, sex) {
            console.log('Person');
            console.log(this);
            console.log(this.age);
            console.log(name, sex);
        }
        // Person.call(p)
        // Person.apply(p)
        // Person.bind(p)()
        new Person(p)
        var person2 = Person.bind(p);
        // 当new person2的时候，this就指向了实例出来的对象，此时bind就失效了，
        // 所以this.age 为undefined
        var p2 = new person2();
        console.log('+++++++++++++++++++++++++分割线++++++++++++++++++++++++++');

        // 更改this指向就是更改执行期上下文
        Function.prototype.bindy = function(context) {
            var _self = this,
                args = Array.prototype.slice.call(arguments, 1);



            var fn = function() {
                // console.log(this instanceof _self);
                var newArgs = Array.prototype.slice.call(arguments);
                // args.concat(newArgs)是为了防止，return出去的函数，再有传进来的参数
                // this instanceof _self ? this : context
                // 判断是不是new，如果是调用new this是_self构造出来的
                _self.apply(this instanceof _self ? this : context, args.concat(newArgs))
            }

            fn.prototype = this.prototype;
            return fn;
        }
        var p = Person.bindy(p, '张三', '男性')
        new p()
        console.log(p instanceof Person);

        // (function() {
        //     var Tab = function() {
        //         this.tab = document.getElementsByClassName('tab')[0];
        //         this.tabs = document.getElementsByClassName('t-item');
        //         this.pages = document.getElementsByClassName('p-item')
        //     }
        //     Tab.prototype = {
        //         init: function() {
        //             this.bindEvent();
        //         },
        //         bindEvent: function() {
        //             this.tab.addEventListener('click', this.tabClidk.bind(this))
        //         },
        //         tabClidk: function(e) {
        //             console.log(this);
        //             let tar = e.target,
        //                 className = tar.className,
        //                 oTabs = this.tabs,
        //                 oPages = this.pages,
        //                 thisIndex = Array.prototype.indexOf.call(oTabs, tar)
        //             console.log(thisIndex);
        //         }
        //     }
        //     return new Tab().init()
        // })()
    </script>
</body>

</html>